<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	margin: 30px auto;
	-webkit-perspective: 300px;
	perspective: 300px;
} 
#div {
	width: 100px;
	height: 100px;
	background: red;
}
</style>
<script type="text/javascript" src="m.Tween.js"></script>
<script type="text/javascript">
/* 
在js中没有办法 通过计算后样式 获取到 transform中的相关操作，只能获取到矩阵

关于 transform的所有操作，我们都通过cssTransform来进行操作，
然后在 cssTransform 中来记录 对transform的每一步操作，获取的时候，就获取 cssTransform中的记录

 */
function cssTransform(el, attr, val) {
	if(!el.transform){
		el.transform = {}
	}
	if(typeof val == "undefined"){
		console.log("获取样式");
	} else {
		el.transform[attr] = val;
		console.log(el.transform);
	}
}
window.onload = function(){
	var div = document.querySelector('#div');
	cssTransform(div, "translateZ",100);
	cssTransform(div, "rotate",90);
	cssTransform(div, "scale",10);

	//console.log(div.transform.rotate);
};
</script>
</head>
<body>
<div id="box">
	<div id="div"></div>
</div>	
</body>
</html>